<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" href="">
    <title>Push And Pull</title>
    <style type="text/css">
        body {
            background-color: #eccc68;
        }

        canvas {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <script type="module">
        import {createCanvas, vector2, vector2random, constrain, random, map, animation, mouse, curve, circle, line, fill, stroke} from './spring/board.js'
        const width = 800, height = 600, r = 16
        const tree = [] // , walker = vector2()
        // tree[0] = vector2(width / 2, height / 2)

        class Particle {
            constructor(x, y) {
                this.pos = vector2(x || random(width), y || random(height))
                this.vel = vector2random()
                this.acc = vector2()
                this.tail = []
            }

            show() {
                circle(this.pos.x, this.pos.y, 10, 20)
                fill()
                for (let i = 1; i < this.tail.length; ++i) {
                    if (this.tail[i-1].clone().sub(this.tail[i]).length < height / 2) {
                        line(this.tail[i-1], this.tail[i])
                        stroke()
                    }
                }
                // curve(this.tail, stroke)
            }

            update() {
                this.vel.add(this.acc)
                this.pos.add(this.vel)
                this.tail.push(this.pos.clone())
                if (this.tail.length > 20) {
                    this.tail.splice(0, 1)
                }
            }

            edge() {
                if (this.pos.x > width) {
                    this.pos.x = 0
                }
                if (this.pos.y > height) {
                    this.pos.y = 0
                }
                if (this.pos.x < 0) {
                    this.pos.x = width

                }
                if (this.pos.y < 0) {
                    this.pos.y = height
                }
            }


            attracted(target) {
                let force = target.pos.clone().sub(this.pos)
                let G = 10
                let distance = constrain(force.length, 20, 500)
                force.length = G / distance
                if (distance < 20) {
                    force.mul(-1)
                }
                this.acc.copy(force)
            }
        }
        let walkers = []
        for (let i = 0; i < 20; ++i) {
            walkers.push(new Particle())
        }
        // let target = new Particle(width / 2, height / 2)


        createCanvas(width / 2, height / 2)
        function draw() {
            walkers.forEach( walker => {
                for (let target of walkers) {
                    if (target === walker) continue
                    walker.attracted(target)
                }
                walker.update()
                walker.edge()
                walker.show()
            })

            // target.show()


        }
        animation(draw)
    </script>
</body>

</html>